<section class="content-header">
    <h1>
        整线故障分析
        <!-- <small>Control panel</small> -->
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#filterModal">
                目标值设定
            </button>
            <button type="button" class="btn btn-default btn-sm" (click)="exportData()">
                数据导出
            </button>
        </div>
    </h1>
</section>
<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-3 col-md-push-9">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">查询区域</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="form-group">
                        <label>查询类型</label>
                        <label *ngFor="let t of typeList">
                            <input type="radio" class="flat-red" (change)="type=t.id" name="type" [checked]="type===t.id">{{t.name}}
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="DateTimeRange">时间</label>
                        <input type="text" class="form-control pull-right" id="DateTimeRange" placeholder="请选择日期" />
                    </div>
                    <div class="form-group">
                        <label>区域</label>
                        <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems" displayExpr="subArea"
                            [(selectedItem)]="subAareSelected" [value]="subAreaItems[0]" [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                    <div class="form-group">
                        <label>班次</label>
                        <dx-select-box #shift style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="shiftItems" displayExpr="shiftName"
                            [(selectedItem)]="shiftSelected" [(value)]="shiftSelected" [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                    <div class="form-group">
                        <label>过滤值</label>
                        <dx-number-box format="#0分钟" [min]="0" [max]="100" style="width:100%;height:35px;margin-bottom:5px;border-radius: 0px" [(value)]="filterValue"
                            [step]="1"></dx-number-box>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-md-pull-3" id="export-wrapper">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">设备故障率</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div echarts [options]="chartFaultTimeOption" [loading]="showloadingFault" (chartInit)="onChartInit('设备故障率',$event)" class="demo-chart"
                        style="height:300px;"></div>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">MTTR</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div echarts [options]="chartMttrOption" [loading]="showloadingMttr" [merge]="true" (chartInit)="onChartInit('MTTR',$event)"
                        class="demo-chart" style="height:300px;"></div>
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">MTBF</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div echarts [options]="chartMtbfOption" [loading]="showloadingMtbf" (chartInit)="onChartInit('MTBF',$event)" class="demo-chart"
                        style="height:300px;"></div>
                </div>
            </div>

            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">整线故障查询</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid [dataSource]="mflGroupList" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" 
                    [rowAlternationEnabled]="true" (onExporting)="onExporting($event)" [columnMinWidth]="50" [columnAutoWidth]="true">
                        <dxo-paging [pageSize]="10"></dxo-paging>
                        <dxo-export [enabled]="true" fileName="整线故障查询" [allowExportSelectedData]="false"></dxo-export>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxi-column dataField="subArea" caption="区域">
                        </dxi-column>
                        <dxi-column dataField="type" caption="周期">
                        </dxi-column>
                        <dxi-column dataField="reportFormat" caption="时间">
                        </dxi-column>
                        <dxi-column dataField="tfaultTime" caption="故障时间(分)">
                        </dxi-column>
                        <dxi-column dataField="tfaultCount" caption="故障次数">
                        </dxi-column>
                        <dxi-column dataField="tworkTime" caption="总工作时间(分)">
                        </dxi-column>
                        <dxi-column dataField="tfaultRate" caption="故障率">
                        </dxi-column>
                        <dxi-column dataField="mttr" caption="MTTR">
                        </dxi-column>
                        <dxi-column dataField="mtbf" caption="MTBF">
                        </dxi-column>

                    </dx-data-grid>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">目标值设置</h4>
                </div>
                <div class="modal-body">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs pull-right">
                            <li class="active">
                                <a href="#month" data-toggle="tab">月指标</a>
                            </li>
                            <li>
                                <a href="#week" data-toggle="tab">周指标</a>
                            </li>
                            <li>
                                <a href="#other" data-toggle="tab">默认指标</a>
                            </li>
                            <li class="pull-left header">
                                <i class="fa fa-inbox"></i> 指标配置</li>
                        </ul>
                        <div class="tab-content no-padding">
                            <div class="chart tab-pane active" id="month" style="position: relative; height: 300px;">
                                <div class="row no-padding no-margin">
                                    <dx-select-box style="width:100%;height:35px;margin-bottom:0px;border-radius: 0px" [items]="yearItems" [(selectedItem)]="yearMonthSelected"
                                        (selectedItemChange)="onYearChange($event,3)" [value]="yearMonthSelected" [searchEnabled]="true">
                                    </dx-select-box>
                                </div>
                                <dx-data-grid [dataSource]="monthTargetItems" (onRowUpdated)="updateTarget($event)" [showColumnLines]="true" [showRowLines]="true"
                                    [showBorders]="true" [height]="300" [rowAlternationEnabled]="true" [filterRow]="{ visible: true }"
                                    [scrolling]="{ mode: 'infinite' }" [columnMinWidth]="50" [columnAutoWidth]="true">
                                    <dxo-paging [enabled]="false"></dxo-paging>
                                    <dxo-editing mode="cell" [allowUpdating]="true"></dxo-editing>
                                    <dxi-column [allowEditing]="false" dataField="startDate" caption="开始日期">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="false" dataField="endDate" caption="结束日期">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="false" dataField="typeIndex" caption="月份">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="false" dataField="targetName" caption="目标名称">
                                    </dxi-column>
                                    <dxi-column dataField="targetValue" caption="目标值">
                                        <dxi-validation-rule type="required"></dxi-validation-rule>
                                    </dxi-column>
                                </dx-data-grid>
                            </div>
                            <div class="chart tab-pane" id="week" style="position: relative; height: 350px;">
                                <div class="row no-padding no-margin">
                                    <dx-select-box style="width:100%;height:35px;margin-bottom:0px;border-radius: 0px" [items]="yearItems" [(selectedItem)]="yearWeekSelected"
                                        (selectedItemChange)="onYearChange($event,2)" [value]="yearWeekSelected" [searchEnabled]="true">
                                    </dx-select-box>
                                </div>
                                <dx-data-grid [dataSource]="weekTargetItems" (onRowUpdated)="updateTarget($event)" [showColumnLines]="true" [showRowLines]="true"
                                    [showBorders]="true" [height]="300" [rowAlternationEnabled]="true" [filterRow]="{ visible: true }"
                                    [scrolling]="{ mode: 'infinite' }" [columnMinWidth]="50" [columnAutoWidth]="true">
                                    <dxo-paging [enabled]="false"></dxo-paging>
                                    <dxo-editing mode="cell" [allowUpdating]="true"></dxo-editing>
                                    <dxi-column [allowEditing]="false" dataField="startDate" caption="开始日期">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="false" dataField="endDate" caption="结束日期">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="false" dataField="typeIndex" caption="周">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="false" dataField="targetName" caption="目标名称">
                                    </dxi-column>
                                    <dxi-column dataField="targetValue" caption="目标值">
                                        <dxi-validation-rule type="required"></dxi-validation-rule>
                                    </dxi-column>
                                </dx-data-grid>
                            </div>
                            <div class="chart tab-pane" id="other" style="position: relative; height: 300px;">
                                <dx-data-grid [dataSource]="targetItems" (onRowUpdated)="updateTarget($event)" [showColumnLines]="true" [showRowLines]="true"
                                    [showBorders]="true" [rowAlternationEnabled]="true">
                                    <dxo-paging [enabled]="false"></dxo-paging>
                                    <dxo-editing mode="cell" [allowUpdating]="true"></dxo-editing>
                                    <dxi-column [allowEditing]="false" dataField="targetName" caption="目标名称" [width]="150">
                                    </dxi-column>
                                    <dxi-column dataField="targetValue" caption="目标值">
                                        <dxi-validation-rule type="required"></dxi-validation-rule>
                                    </dxi-column>
                                </dx-data-grid>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" (click)="saveTargetChange()">保存</button>
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</section>